//********** 滚动条插件 ************
// 滚动条插件 - 请不要删除
import PerfectScrollbar from 'perfect-scrollbar';
import "classlist-polyfill";
import "perfect-scrollbar/css/perfect-scrollbar.css";
import store from '@/store'
 // 修复获取不到路由的情况
 import router from '@/router';
// 自定义指令
export function directive(Vue) {
    //============================ 自定义指令 END============================

    /**
     ****************************
     * title: 测试指令，可删除
     * name: v-test
     ****************************
     */
    Vue.directive("test", {
        // 初次创建dom时候
        mounted(el) {
            console.log(el)
        },
        //更新dom的时候
        updated(el) {
            console.log(el)
        }
    })
    // 更多指令...
























    //============================ 自定义指令 END ============================
    /**
    ****************************
    * title: 按钮权限
    * name: v-auth="'权限名称'"
    ****************************
    */
    const checkPermission = (el, binding) => {
        let value = binding.arg ? binding.arg : binding.value;
        let status = false;
        //获取当前的this实例
        let vm = binding.instance;
        //当前菜单对应的路由信息
        let route = vm.$route;
        // 修复获取不到路由的情况
        if(!route){
            route = router.currentRoute.value
        }
        //当前路由权限列表
        let permission_list = (route && route.meta && route.meta.permission) ? route.meta.permission : [];
        let permissionBtns = [];
        for (const key in permission_list) {
            permissionBtns.push(permission_list[key]['action']);
        }

        // 如果为超级管理员就支持所有权限
        const isSuper = store.getRoles();
        if (isSuper) {
            return;
        }

        // let permissionBtns = ['add','edit', 'delete', 'submit', 'publish'];
        permissionBtns.push(route.path);
        permissionBtns.forEach((item) => {
            if (value == item) {
                status = true;
            }
        })
        if (!status) {
            // el.style.display = 'none'
            el.parentNode && el.parentNode.removeChild(el);
        }
    }
    Vue.directive("auth", {
        // 初次创建dom时候
        mounted(el, binding) {
            checkPermission(el, binding)
        },
        //更新dom的时候
        updated(el, binding) {
            checkPermission(el, binding)
        }
    })

    /**
     ****************************
     * title: 滚动条指令 - 请不要删除
     * name: v-scrollBar
     ****************************
     */
    /**
     * @description 自动判断该更新PerfectScrollbar还是创建它
     * @param {HTMLElement} el - 必填。dom元素
     */
    const el_scrollBar = (el) => {
        //在元素上加点私货，名字确保不会和已有属性重复即可，暂为_mydiy_ps_scrollBar_
        if (el._mydiy_ps_scrollBar_ instanceof PerfectScrollbar) {
            el._mydiy_ps_scrollBar_.update();
        } else {
            //el上挂一份属性
            el._mydiy_ps_scrollBar_ = new PerfectScrollbar(el, {
                suppressScrollX: true,
                // 滚动速度
                wheelSpeed: 0.1,
                // 滚动车轮传播
                wheelPropagation: true,
                // 最小滚动条长度
                minScrollbarLength: 1
            });
        }
    };
    //自定义v-scrollBar
    Vue.directive("scrollBar", {
        //初次创建dom时候
        mounted(el) {
            //判断其样式是否存在position 并且position为"fixed", "absolute"或"relative"
            //如果不符合条件，抛个错误。也可以抛个警告然顺便给其position自动加上"relative"
            //PerfectScrollbar实现原理就是对dom注入两个div，一个是x轴一个是y轴，他们两的position都是absolute。
            //absolute是相对于所有父节点里设置了position属性的最近的一个节点来定位的，为了能够正确定位，要给其设置position属性
            const rules = ["fixed", "absolute", "relative", "sticky"];
            if (!rules.includes(window.getComputedStyle(el, null).position)) {
                console.error(`perfect-scrollbar所在的容器的position属性必须是以下之一：${rules.join("、")}`)
            }
            //el上挂一份属性
            el_scrollBar(el);
        },
        //更新dom的时候
        updated(el) {
            el_scrollBar(el);
        }
    })
}